<template>
	<view class="supplierList">
		<u-navbar title="供应商列表" :border-bottom="false"></u-navbar>
		<view class="search_box">
			<u-search v-model="keyword" @search="search" @custom="search"></u-search>
		</view>
		<scroll-view class="waterfall" scroll-y="true">
			<view v-for="(item, index) in flowList" :key="index" class="waterfall_itm" @click="supplier(item.ouid)">
				<view class="waterfall_l">
					<u-lazy-load :image="item.avatar" :height="'156rpx'" :img-mode="'scaleToFill'"></u-lazy-load>
				</view>
				<view class="waterfall_r">
					<view class="l1">{{ item.real_name }}·供应商</view>
					<view class="l2">
						<view class="time">联系电话：{{ item.tel }}</view>
					</view>
					<view class="l3">
						<view class="b1"></view>
						<view class="b2">进库选品</view>
					</view>
				</view>
			</view>
			<view style="padding: 20rpx 0rpx; box-sizing: border-box">
				<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { gyslist } from '../../libs/axios.js';
export default {
	data() {
		return {
			keyword: '',
			flowList: [],
			loadStatus: 'nomore'
		};
	},
	onLoad() {
		this.getgyslist();
	},
	methods: {
		supplier(ouid) {
			uni.navigateTo({
				url: '/pages/supplier/supplier?ouid=' + ouid
			});
		},
		async getgyslist() {
			this.flowList = [];
			let info = await gyslist({ title: this.keyword });
			info.data.forEach((item) => {
				item.avatar = this.$store.state.imgUrl + item.avatar;
			});
			this.flowList = info.data;
		},
		lower() {
			this.loadStatus = 'loading';
			if (true) {
				console.log(1);
			} else {
				this.loadStatus = 'nomore';
			}
		},
		search() {
			this.getgyslist();
		}
	}
};
</script>

<style lang="scss">
.supplierList {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.search_box {
		margin: 0 28rpx;
		padding: 20rpx 0;
		background: #fff;
	}
	.waterfall {
		height: 75vh;
		overflow: scroll;
		padding: 0 30rpx;
		box-sizing: border-box;
		.waterfall_itm {
			margin-bottom: 24rpx;
			opacity: 1;
			border-radius: 16rpx;
			background: rgb(255, 255, 255);
			padding: 26rpx;
			box-sizing: border-box;
			display: flex;
			.waterfall_l {
				width: 156rpx;
				height: 156rpx;
				border-radius: 16rpx;
				overflow: hidden;
			}
			.waterfall_r {
				height: 156rpx;
				width: 460rpx;
				margin-left: 28rpx;
				position: relative;
				.l1 {
					font-size: 28rpx;
					font-weight: 400;
					color: rgba(51, 51, 51, 1);
				}
				.l2 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-top: 14rpx;
					.time {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(119, 119, 119, 1);
					}
					.address {
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
					}
				}
				.l3 {
					display: flex;
					align-items: center;
					justify-content: space-between;
					position: absolute;
					bottom: 0;
					left: 0;
					right: 0;
					.b1 {
						border-radius: 8rpx;
						background: rgb(252, 243, 230);
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 2rpx 20rpx 2rpx 20rpx;
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(133, 93, 44, 1);
					}
					.b2 {
						width: 128rpx;
						height: 42rpx;
						border-radius: 40rpx;
						border: 2rpx solid rgb(178, 138, 37);
						font-size: 24rpx;
						font-weight: 400;
						color: rgba(178, 138, 37, 1);
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}
}
</style>
